<script lang="ts">
  export default {
    name: 'GoodsSku'
  }
</script>
<script setup lang="ts">
import { GoodsInfo, specItem, specValue } from '@/types/data'

defineProps<{
  goods: GoodsInfo
}>()
//修改规格值的状态
const changeSelected = (item: specItem, sub: specValue) => {
  //判断状态
  if (sub.selected) {
    //如果当前的规格的值是选中的,将其设置为未选中
    sub.selected = false
  } else {
    //如果当前规格的值是未选中的,将其设置为选中,同时将其他值设置为未选中
    item.values.forEach(v => v.selected = false)
    sub.selected = true
  }
}
</script>
<template>
  <div class="goods-sku">
    <dl v-for="item in goods.specs" :key="item.name">
      <dt>{{ item.name }}</dt>
      <dd>
        <template v-for="sub in item.values" :key="sub.name">
          <img :class="{ selected: sub.selected }"  @click="changeSelected(item, sub)" v-if="sub.picture" :src="sub.picture" alt="" />
          <span :class="{ selected: sub.selected }"  @click="changeSelected(item, sub)" v-else>{{ sub.name }}</span>
        </template>
      </dd>
    </dl>
  </div>
</template>
<style scoped lang="less">
.sku-state-mixin () {
  border: 1px solid #e4e4e4;
  margin-right: 10px;
  cursor: pointer;
  &.selected {
    border-color: @xtxColor;
  }
  &.disabled {
    opacity: 0.6;
    border-style: dashed;
    cursor: not-allowed;
  }
}
.goods-sku {
  padding-left: 10px;
  padding-top: 20px;
  dl {
    display: flex;
    padding-bottom: 20px;
    align-items: center;
    dt {
      width: 50px;
      color: #999;
    }
    dd {
      flex: 1;
      color: #666;
      > img {
        width: 50px;
        height: 50px;
        margin-top: 5px;
        .sku-state-mixin ();
      }
      > span {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        padding: 0 20px;
        margin-top: 5px;
        .sku-state-mixin ();
      }
    }
  }
}
</style>

